<template>
<div>
    <headers></headers>
    <div class="mainBoxOfPay">
      <el-row :gutter="20" class="payMain">
        <el-col  class="l" :md="4" :lg="4" :xs="12" :sm="12">
            <div id="qrcode" ref="qrcode" style="transition:.3s ease-in;">

            </div>
        </el-col>
        <el-col :span="6" class="c" :md="6" :lg="6" :xs="24" :sm="24">
            <i class="el-icon-caret-left"></i>
            <dl>
                <dt>请使用手机微信</dt>
                <dd>扫描二维码进行支付</dd>
            </dl>
        </el-col>
        <el-col :span="6" class="r" :md="6" :lg="6" :xs="24" :sm="24">
            <img :src="img" alt="">
        </el-col>
      </el-row>
  </div>
  <foot></foot>
</div>
  
</template>

<script>
var timer;
import headers from "@/components/header.vue"
import foot from "@/components/foot.vue"
import QRCode from 'qrcode2';
import imgs from "@/assets/images/phone-bg.png"
export default {
    components:{
        headers,
        foot
    },
    data () {
        return {
            text:"",
            img:imgs,
            dialogVisible:false
        }
    },
    methods:{
        handleClose(done) {
            this.$confirm('确认关闭当前页面吗？')
            .then(_ => {
                this.close();
            })
            .catch(_ => {});
        },
        close(){
            window.close();
        },
        aa(){
            var qrcodes = new QRCode(document.getElementById("qrcode"), {
                text: this.erweima
              })
        },
         aliPay(val){
            this.$ajax.get("/alipay/qrCode",{
                params:{
                    taskId:val
                }
            },{headers: {'Content-Type': 'text/html;charset=UTF-8'}})
            .then(res =>{
               const div = document.createElement('div')
                div.innerHTML = res.data //此处form就是后台返回接收到的数据
                document.body.appendChild(div)
                document.forms[0].submit();
            })
        },
        wxPay(val){
            this.$ajax.get("/wxpay/qrCode",{
                params:{
                    taskId:val
                }
            })
            .then(res =>{
                this.erweima = res.data.data;
                this.dialogVisible = true;
                this.$nextTick(()=>{
                    this.aa();
                })
            })
        },
        getPayResult(val){ // 获取支付结果 
            this.$ajax.post("/userTask/status",{
                taskGuid:val
            })
            .then(res =>{
               if(res.data.data == 10){
                   clearInterval(timer);
                   this.$message({
                        message: '支付成功,1秒后跳转到跳转到发布页!',
                        type: 'success'
                    });
                    setTimeout(()=>{
                         this.$router.push(`/qiming/pub?id=${val}`)
                        //this.$router.push("/info/fkjl");
                    },1000)
                   
               }
               if(res.data.data == 0){
                //    clearInterval(timer);
                //    this.$message({
                //         message: '已发布!',
                //         type: 'success'
                //     });
                //     setTimeout(()=>{
                //         //this.$router.push(`/qiming/pub?id=${val}`)
                //         this.$router.push("/info/fkjl");
                //     },1000)
                   
               }
               if(res.data.data == 20){
                //    clearInterval(timer);
                   this.$message({
                        message: '已中标,跳转到发布页!',
                        type: 'success'
                    });
                    setTimeout(()=>{
                        // this.$router.push(`/qiming/pub?id=${val}`)
                        this.$router.push("/info/fkjl");
                    },1000)
                   
               }
               if(res.data.data == -1){
                   this.$message({
                        message: '订单已取消,请重新付款!',
                        type: 'success'
                    });
                   
               }
            })
        },
    },
    destroyed () {
        clearInterval(timer);
    },
    created(){
        if(this.$route.query.payType == 'zfb'){
            this.aliPay(this.$route.query.id)
        }else{
            this.wxPay(this.$route.query.id);
            timer = setInterval(() => {
                console.log(111)
                this.getPayResult(this.$route.query.id);
            }, 300);
            
        }
        
    }
}
</script>

<style lang="scss" >
.mainBoxOfPay{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payMain{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .el-col-6{
        
    }
    .l{
        padding: 10px;
            border: 1px solid #ddd;
            img{
            width: 100%;
            display: block;
        }
    }
    .c{
        display: flex;
        align-items: center;
        margin: 0 20px;
        i{
            font-size: 40px;
        }
        dl{
            font-size: 18px;
            line-height: 24px;
        }
    }
}
@media  (max-width: 750px){
    .mainBoxOfPay{
        align-items: flex-start;
        .c{
            justify-content: center;
        }
        .r{
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>